<template>
  <div class="container">
    <van-collapse :value="activeNames" @change="firstChange" :accordion='true'>
      <van-collapse-item title="标题1" name="1">
        <div class="first-collapse">
          <van-collapse v-model="secondActiveNames" :accordion='true' @change="secondChange">
            <van-collapse-item title="二级" name="21">
              <div>
                <van-collapse v-model="thirdActiveNames" @change="thirdChange">
                  <van-collapse-item title="三级" name="31" :is-link="false"></van-collapse-item>
                  <van-collapse-item title="三级" name="32" :is-link="false"></van-collapse-item>
                  <van-collapse-item title="三级" name="33" :is-link="false"></van-collapse-item>
                  </van-collapse>
              </div>
            </van-collapse-item>
            <van-collapse-item title="二级" name="22"></van-collapse-item>
            <van-collapse-item title="二级" name="23"></van-collapse-item>
          </van-collapse>
        </div>
      </van-collapse-item>
      <van-collapse-item title="标题2" name="一级"></van-collapse-item>
      <van-collapse-item title="标题3" name="3"></van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  components: { },
  data() {
    return {
      activeNames: '',
      secondActiveNames: '',
      thirdActiveNames: ''
    }
  },
  onLoad() {
  },
  onShow() {
  },
  methods: {
    firstChange(e) {
      this.activeNames = e.mp.detail
    },
    secondChange(e) {
      this.secondActiveNames = e.mp.detail
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  background: #fff;
  min-height: 100vh;
  /deep/ ._van-collapse {
    .van-collapse-item__content {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
  }
}
</style>
